<template>
  <view class="service-quality-container">
    <!-- Header with user info -->
    <view class="header">
      <view class="user-info">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="user-details">
          <text class="username">{{ userInfo.name }}</text>
          <text class="user-id">{{ userInfo.id }}</text>
        </view>
      </view>
      <view class="close-btn">
        <text class="close-icon">×</text>
      </view>
    </view>

    <!-- Service quality gauge -->
    <view class="quality-section">
      <text class="section-title">服务质量</text>
      <view class="gauge-container">
        <canvas canvas-id="qualityGauge" id="qualityGauge" class="gauge-canvas"></canvas>
        <view class="gauge-center">
          <text class="score">{{ score }}</text>
          <text class="score-label">服务质量分</text>
          <view class="detail-btn">
            <text>积分</text>
          </view>
        </view>
        <view class="gauge-min">0</view>
        <view class="gauge-max">100</view>
        <view class="score-detail">积分明细 ></view>
      </view>
    </view>

    <!-- Service order statistics -->
    <view class="order-stats">
      <view class="stats-header">
        <view class="stats-icon">
          <text class="iconfont icon-stats"></text>
        </view>
        <text class="stats-title">服务订单统计</text>
      </view>
      <view class="stats-cards">
        <view class="stat-card">
          <text class="stat-value">{{ orderStats.pending }}</text>
          <text class="stat-label">待完成</text>
          <text class="stat-unit">单</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ orderStats.inProgress }}</text>
          <text class="stat-label">服务中</text>
          <text class="stat-unit">单</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ orderStats.completed }}</text>
          <text class="stat-label">累计完工</text>
          <text class="stat-unit">单</text>
        </view>
      </view>
    </view>

    <!-- Service quality indicators -->
    <view class="quality-indicators">
      <view class="indicators-header">
        <view class="indicator-icon">
          <text class="iconfont icon-quality"></text>
        </view>
        <text class="indicators-title">服务质量指标</text>
        <text class="indicators-detail">积分明细 ></text>
      </view>
      <view class="indicators-grid">
        <view class="indicator-item" v-for="(item, index) in qualityIndicators" :key="index">
          <text class="indicator-value">{{ item.value }}%</text>
          <text class="indicator-label">{{ item.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '呢称呢称',
        id: '13452166911',
        avatar: '/static/avatar.png'
      },
      score: 100,
      orderStats: {
        pending: 1,
        inProgress: 9,
        completed: 100
      },
      qualityIndicators: [
        { label: '预约准时率', value: 99.21 },
        { label: '预约送达率', value: 99.21 },
        { label: '预约完成率', value: 99.21 },
        { label: '售后率', value: 99.21 },
        { label: '退款率', value: 99.21 }
      ],
      ctx: null,
      canvasWidth: 0,
      canvasHeight: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initGauge();
    });
  },
  methods: {
    initGauge() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#qualityGauge').boundingClientRect(data => {
        this.canvasWidth = data.width;
        this.canvasHeight = data.height;
        this.drawGauge();
      }).exec();
    },
    drawGauge() {
      const ctx = uni.createCanvasContext('qualityGauge', this);
      const centerX = this.canvasWidth / 2;
      const centerY = this.canvasHeight / 2;
      const radius = Math.min(centerX, centerY) - 10;
      
      // Draw background circles
      for (let i = 3; i > 0; i--) {
        const circleRadius = radius * (i / 3);
        ctx.beginPath();
        ctx.arc(centerX, centerY, circleRadius, 0, 2 * Math.PI);
        ctx.setStrokeStyle('rgba(255, 255, 255, 0.3)');
        ctx.setLineWidth(1);
        ctx.stroke();
      }
      
      // Draw progress arc
      const startAngle = Math.PI;
      const endAngle = 2 * Math.PI;
      const progressAngle = startAngle + (endAngle - startAngle) * (this.score / 100);
      
      // Background arc
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, startAngle, endAngle);
      ctx.setStrokeStyle('rgba(255, 255, 255, 0.3)');
      ctx.setLineWidth(4);
      ctx.stroke();
      
      // Progress arc
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, startAngle, progressAngle);
      const gradient = ctx.createLinearGradient(centerX - radius, centerY, centerX + radius, centerY);
      gradient.addColorStop(0, '#FFD700');
      gradient.addColorStop(1, '#FFA500');
      ctx.setStrokeStyle(gradient);
      ctx.setLineWidth(4);
      ctx.stroke();
      
      ctx.draw();
    }
  }
};
</script>

<style>
.service-quality-container {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
}

.header {
  background: linear-gradient(to right, #2ECC71, #1ABC9C);
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 2rpx solid #FFFFFF;
}

.user-details {
  margin-left: 20rpx;
}

.username {
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: 500;
}

.user-id {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
  margin-top: 4rpx;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close-icon {
  color: #FFFFFF;
  font-size: 48rpx;
  font-weight: 300;
}

.quality-section {
  background: linear-gradient(to right, #2ECC71, #1ABC9C);
  padding: 20rpx 30rpx 60rpx;
  position: relative;
}

.section-title {
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 30rpx;
}

.gauge-container {
  position: relative;
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gauge-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.gauge-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.score {
  color: #FFFFFF;
  font-size: 80rpx;
  font-weight: bold;
}

.score-label {
  color: #FFFFFF;
  font-size: 28rpx;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
}

.detail-btn {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 8rpx 40rpx;
}

.detail-btn text {
  color: #FFFFFF;
  font-size: 24rpx;
}

.gauge-min, .gauge-max {
  position: absolute;
  bottom: 40rpx;
  color: #FFFFFF;
  font-size: 24rpx;
}

.gauge-min {
  left: 40rpx;
}

.gauge-max {
  right: 40rpx;
}

.score-detail {
  position: absolute;
  bottom: 10rpx;
  right: 30rpx;
  color: #FFFFFF;
  font-size: 24rpx;
}

.order-stats {
  padding: 30rpx;
  border-bottom: 2rpx solid #F5F5F5;
}

.stats-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.stats-icon {
  margin-right: 10rpx;
}

.stats-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

.stats-cards {
  display: flex;
  justify-content: space-between;
  background-color: #FFF8EE;
  border-radius: 10rpx;
  padding: 20rpx;
}

.stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #333333;
}

.stat-label {
  font-size: 24rpx;
  color: #666666;
  margin-top: 10rpx;
}

.stat-unit {
  position: absolute;
  right: 20rpx;
  top: 10rpx;
  font-size: 24rpx;
  color: #666666;
}

.quality-indicators {
  padding: 30rpx;
}

.indicators-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.indicator-icon {
  margin-right: 10rpx;
}

.indicators-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  flex: 1;
}

.indicators-detail {
  font-size: 24rpx;
  color: #999999;
}

.indicators-grid {
  display: flex;
  flex-wrap: wrap;
}

.indicator-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.indicator-value {
  font-size: 32rpx;
  color: #3498DB;
  font-weight: bold;
}

.indicator-label {
  font-size: 24rpx;
  color: #666666;
  margin-top: 10rpx;
}

/* Add icon font styles */
@font-face {
  font-family: 'iconfont';
  src: url('data:font/woff2;charset=utf-8;base64,...') format('woff2');
}

.iconfont {
  font-family: 'iconfont';
}

.icon-stats:before {
  content: '\e64e';
}

.icon-quality:before {
  content: '\e619';
}
</style>